﻿<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Jekyll v3.6.0">
<title>按钮 &middot; BootstrapVue</title>
<!-- Bootstrap 核心CSS -->
<link href="../../../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../../../v4/assets/css/docsearch.min.css" rel="stylesheet">
<link href="../../../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="../../style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="../../manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="../../style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="../../style/icons/icon_512.png" sizes="512x512">

<!-- Meta关键字定义 -->
<meta name="description" content="The most popular HTML, CSS, and JS library in the world.">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"> <a class="navbar-brand mr-0 mr-md-2" href="../" aria-label="Bootstrap">
  <svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
    <title>Bootstrap</title>
    <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/>
    <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/>
  </svg>
  </a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link " href="../">首页</a></li>
      <li class="nav-item"><a class="nav-link" href="index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link active" href="../components">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="../directives">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="../reference">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="alse"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions"> 
        <a class="dropdown-item active" href="../../../bootstrap-vue/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="//www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="//ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="//v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="//v.z01.com/" target="_blank">H5移动创作</a>
        <a class="dropdown-item" href="//www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="//zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a></li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="download.html">下载 Bootstrap</a> </header>

<div class="container-fluid">
  <div class="row flex-xl-nowrap">
    <div class="col-12 col-md-3 col-xl-2 bd-sidebar">
      <form class="bd-search d-flex align-items-center">
        <input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
        <button class="btn btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false">
          <title>Menu</title>
          <path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/>
        </svg>
        </button>
      </form>



<nav class="collapse bd-links" id="bd-docs-nav">
<div class=""><a href="../" class="bd-toc-link">首页</a></div>
<div class="bd-toc-item nuxt-link-exact-active "><a href="../../../bootstrap-vue/docs/" class="bd-toc-link  "> 起步 </a>
<ul class="nav bd-sidenav">
</ul>
</div>
<div class="bd-toc-item active"><a href="../../../bootstrap-vue/docs/components/" class="bd-toc-link nuxt-link-exact-active"> 组件 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/index.html" class="nav-link"> 组件目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/alert.html" class="nav-link"> 警告提示框(Alert) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/badge.html" class="nav-link"> 徽章(Badge) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/breadcrumb.html" class="nav-link"> 面包屑导航(Breadcrumb) </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/components/button.html" class="nav-link"> 按钮(Button) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-group.html" class="nav-link"> 按钮组(Button Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/button-toolbar.html" class="nav-link"> 按钮Toolbar(Button Toolbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/calendar.html" class="nav-link"> 日历组件(Calendar) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/card.html" class="nav-link"> 卡片(Card) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/carousel.html" class="nav-link"> 轮播效果(Carousel) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/collapse.html" class="nav-link"> 折叠面板(Collapse) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/dropdown.html" class="nav-link"> 下拉菜单(Dropdown) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/embed.html" class="nav-link"> 嵌入(Embed) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form.html" class="nav-link"> 表单(Form) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-checkbox.html" class="nav-link"> 表单复选框(Form Checkbox) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-datepicker.html" class="nav-link"> 表单时间选择器(Form Datepicker) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-file.html" class="nav-link"> 文件选择(Form File) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-group.html" class="nav-link"> 表单组合(Form Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-input.html" class="nav-link"> 表单输入框(Form Input) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-radio.html" class="nav-link"> 单选择表单Form Radio </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-select.html" class="nav-link"> 下拉式表单(Form Select) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-spinbutton.html" class="nav-link"> 按钮式表单(Form Spinbuttno) <small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-tags.html" class="nav-link"> Tags表单选择器(Form Tags) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-textarea.html" class="nav-link"> 文本框(Form Textarea) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/form-timepicker.html" class="nav-link"> 表单内时间控件(Form Timepicker) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/image.html" class="nav-link"> 图片(Image) </a></li>

<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/input-group.html" class="nav-link"> 输入框(Input Group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/jumbotron.html" class="nav-link"> Hero大块屏(Jumbotron) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/layout.html" class="nav-link"> 布局与网络Layout and Grid System </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/link.html" class="nav-link"> 链接(Link)</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/list-group.html" class="nav-link"> 列表组(List group) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/media.html" class="nav-link"> 媒体(Media) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/modal.html" class="nav-link"> 弹出模态框(Modal) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/nav.html" class="nav-link"> 导航(Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/navbar.html" class="nav-link"> 导航栏(Navbar) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination.html" class="nav-link"> 分页(Pagination) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/pagination-nav.html" class="nav-link"> 分页导航(Pagination Nav) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/popover.html" class="nav-link"> 指示备注(Popover) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/progress.html" class="nav-link"> 进度指示器(Progress) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/spinner.html" class="nav-link"> 旋转指示器(Spinner) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/table.html" class="nav-link"> 表格(Table) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tabs.html" class="nav-link"> 选项卡(Tabs) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/time.html" class="nav-link"> 时间组件(Time) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/toast.html" class="nav-link"> 冒泡推送(Toasts) </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/components/tooltip.html" class="nav-link"> tip提示组件(Tooltip) </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/directives/" class="bd-toc-link"> 指令 </a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/index.html" class="nav-link"> 指令目录 </a></li>
<li class="nav-item active"><a href="../../../bootstrap-vue/docs/directives/hover.html" class="nav-link"> Hover 指令<small class="badge text-uppercase badge-success">New</small> </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/popover.html" class="nav-link"> Popover 提示备注</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/scrollspy.html" class="nav-link"> Scrollspy 滚动监听</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/tooltip.html" class="nav-link"> Tooltip 提示指令</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/directives/visible.html" class="nav-link"> Visible 可见性操作<small class="badge text-uppercase badge-success">New</small> </a></li>
</ul>
</div>
<div class="bd-toc-item"><a href="../../../bootstrap-vue/docs/icons.html" class="bd-toc-link"> Icons图标</a>
<ul class="nav bd-sidenav">
</ul>
</div>
  
<div class="bd-toc-item"><a class="bd-toc-link" href="../../../bootstrap-vue/docs/reference">参考</a>
<ul class="nav bd-sidenav">
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference" class="nav-link.html"> 参考目录 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/accessibility.html" class="nav-link">友好访问</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/color-variants.html" class="nav-link">Color颜色变量 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/images.html" class="nav-link"> 组件图像img的src路径解析</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/router-links.html" class="nav-link"> Router路由支持 </a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/size-props.html" class="nav-link">大小规格</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/spacing-classes.html" class="nav-link">间距处理</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/starter-templates.html" class="nav-link">开始模板</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/theming.html" class="nav-link">主题色彩</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/utility-classes.html" class="nav-link">通用Class类</a></li>
<li class="nav-item"><a href="../../../bootstrap-vue/docs/reference/validation.html" class="nav-link">Form表单验证</a></li>
</ul>
</div>
<div class=""><a href="https://bootstrap-vue.org/play" class="bd-toc-link" target="_blank">在线模拟器</a></div>
</nav>
</div>

<div class="d-none d-xl-block col-xl-2 bd-toc">
<ul class="section-nav">
<li class="nav-item toc-entry mb-2"><a target="_self" href="#alerts" class="nav-link font-weight-bold"><span>警告提示框Alerts</span></a></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#visible-state" class="nav-link"><span>可见状态</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#v-model-support" class="nav-link"><span>v-model支持</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#contextual-variants" class="nav-link"><span>上下文变体</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#conveying-meaning-to-assistive-technologies" class="nav-link"><span>向辅助技术传达意义</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#additional-content-inside-alerts" class="nav-link"><span>警告提示框中的其他内容</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#color-of-links-within-alerts" class="nav-link"><span>警告提示框中链接的颜色</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#dismissible-alerts" class="nav-link"><span>可忽略的警告提示框</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#auto-dismissing-alerts" class="nav-link"><span>自动关闭警告提示框</span></a></li>
</ul>
</li>
<li class="nav-item toc-entry toc-h2 mb-1 active"><a target="_self" href="#fading-alerts" class="nav-link active"><span>褪色警告提示框</span></a> <!----></li>
<li class="nav-item toc-entry toc-h2 mb-1"><a target="_self" href="#component-reference" class="nav-link"><span>组件参考</span></a>
<ul class="nav flex-column">
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#comp-ref-b-alert" class="nav-link"><span>&lt;b-alert&gt;</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-individual-components" class="nav-link"><span>导入单个组件</span></a></li>
<li class="nav-item toc-entry toc-h3"><a target="_self" href="#importing-as-a-plugin" class="nav-link"><span>导入为Vue.js插件</span></a></li>
</ul>
</li>
</div>


      <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

        <nav data-v-aafc4aea="" aria-label="Breadcrumbs" class="float-left mt-2 mb-0 mb-lg-2">
          <ol data-v-aafc4aea="" class="breadcrumb d-inline-flex bg-transparent px-2 py-1 my-0">
            <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../" class="nuxt-link-active"
                target="_self">首页</a></li>
            <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea="" href="../../../bootstrap-vue/docs"
                class="nuxt-link-active" target="_self">中文手册</a></li>
            <li data-v-aafc4aea="" class="breadcrumb-item"><a data-v-aafc4aea=""
                href="../../../bootstrap-vue/docs/components/" class="nuxt-link-active" target="_self">组件</a></li>
            <li data-v-aafc4aea="" class="breadcrumb-item active"><span data-v-aafc4aea=""
                aria-current="location">按钮</span></li>
          </ol>
        </nav>
        <div class="clearfix d-block"></div>
        <h1 class="bd-title" id="content">按钮(Button)</h1>
        <p class="bd-lead">使用Bootstrap定义的 <code translate="no" class="notranslate text-nowrap">b-button</code>
          组件执行表单、对话框等操作。包括对一些上下文变化、大小、状态等的支持。</p>
        <script type="text/javascript" src="../../../v4/assets/js/pupCMS.js"></script>



        <nav class="bd-quick-links mb-3 d-xl-none" data-v-811345e6="">
          <header data-v-811345e6="">
            <button data-v-811345e6="" type="button"
              class="btn font-weight-bold btn-outline-secondary btn-sm btn-block collapsed"
              aria-controls="bd-quick-links-collapse" aria-expanded="false"><span data-v-811345e6="">Show</span> page
              table of contents </button>
          </header>
          <ul data-v-811345e6="" id="bd-quick-links-collapse" class="collapse" style="display: none;">
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#element-type" class=""><span
                  data-v-811345e6="">Element type</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#type" class=""><span
                  data-v-811345e6="">Type</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#sizing" class=""><span
                  data-v-811345e6="">Sizing</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#contextual-variants" class=""><span
                  data-v-811345e6="">Contextual variants</span></a>
              <ul data-v-811345e6="">
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#solid-color-variants" class=""><span
                      data-v-811345e6="">Solid color variants</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#outline-color-variants"
                    class=""><span data-v-811345e6="">Outline color variants</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#link-variant" class=""><span
                      data-v-811345e6="">Link variant</span></a></li>
              </ul>
            </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#block-level-buttons" class=""><span
                  data-v-811345e6="">Block level buttons</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#pill-style" class=""><span
                  data-v-811345e6="">Pill style</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#squared-style" class=""><span
                  data-v-811345e6="">Squared style</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#disabled-state" class=""><span
                  data-v-811345e6="">Disabled state</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#pressed-state-and-toggling"
                class=""><span data-v-811345e6="">Pressed state and toggling</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#router-link-support" class=""><span
                  data-v-811345e6="">Router link support</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#accessibility" class=""><span
                  data-v-811345e6="">Accessibility</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#see-also" class=""><span
                  data-v-811345e6="">See also</span></a> </li>
            <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#component-reference" class=""><span
                  data-v-811345e6="">Component reference</span></a>
              <ul data-v-811345e6="">
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-button" class=""><span
                      data-v-811345e6="">&lt;b-button&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#comp-ref-b-button-close"
                    class=""><span data-v-811345e6="">&lt;b-button-close&gt;</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-individual-components"
                    class=""><span data-v-811345e6="">Importing individual components</span></a></li>
                <li data-v-811345e6=""><a data-v-811345e6="" target="_self" href="#importing-as-a-plugin" class=""><span
                      data-v-811345e6="">Importing as a Vue.js plugin</span></a></li>
              </ul>
            </li>
          </ul>
        </nav>
        <div translate="translate" class="bd-example vue-example vue-example-b-button notranslate">
          <div>
            <button type="button" class="btn btn-secondary">Button</button>
            <button type="button" class="btn btn-danger">Button</button>
            <button type="button" class="btn btn-success">Button</button>
            <button type="button" class="btn btn-outline-primary">Button</button>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-primary"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h2 id="element-type" class="bv-no-focus-ring"><span class="bd-content-title">元素类型<a class="anchorjs-link"
              href="#element-type" aria-labelledby="element-type"></a></span></h2>
        <p>此 <code translate="no" class="notranslate text-nowrap">&lt;b-button&gt;</code> 组件通常呈现 <code translate="no"
            class="notranslate text-nowrap">&lt;button&gt;</code> 元素。 但是，您也可以通过提供 <code translate="no"
            class="notranslate text-nowrap">href</code> 属性值来渲染 <code translate="no"
            class="notranslate text-nowrap">&lt;a&gt;</code> 元素。 为<code translate="no"
            class="notranslate text-nowrap">to</code>属性提供一个值时 (<code translate="no"
            class="notranslate text-nowrap">vue-router</code> 是必须的)，您也可以生成 <code translate="no"
            class="notranslate text-nowrap">vue-router</code> <code translate="no"
            class="notranslate text-nowrap">&lt;router-link&gt;</code>。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-button-types notranslate">
          <div>
            <button type="button" class="btn btn-secondary">I am a Button</button>
            <a role="button" tabindex="0" target="_self" href="#" class="btn btn-secondary">I am a Link</a></div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>&gt;</span>I am a Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>I am a Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h2 id="type" class="bv-no-focus-ring"><span class="bd-content-title">类型<a class="anchorjs-link" href="#type"
              aria-labelledby="type"></a></span></h2>
        <p>您可以通过将 <code translate="no" class="notranslate text-nowrap">type</code> 设置为 <code translate="no"
            class="notranslate text-nowrap">'button'</code>, <code translate="no"
            class="notranslate text-nowrap">'submit'</code> 或 <code translate="no"
            class="notranslate text-nowrap">'reset'</code>来指定按钮的类型。默认类型是 <code translate="no"
            class="notranslate text-nowrap">'button'</code>。</p>
        <p>注意，当设置 <code translate="no" class="notranslate text-nowrap">href</code> 或 <code translate="no"
            class="notranslate text-nowrap">to</code> 属性时，<code translate="no"
            class="notranslate text-nowrap">type</code>没有作用。</p>
        <h2 id="sizing" class="bv-no-focus-ring"><span class="bd-content-title">尺寸<a class="anchorjs-link"
              href="#sizing" aria-labelledby="sizing"></a></span></h2>
        <p>想要更大的还是更小的按钮? 通过 <code translate="no" class="notranslate text-nowrap">size</code> 属性指定 <code translate="no"
            class="notranslate text-nowrap">lg</code> 或 <code translate="no" class="notranslate text-nowrap">sm</code> 。
        </p>
        <div translate="translate" class="bd-example vue-example vue-example-b-button-sizes notranslate">
          <div class="row">
            <div class="pb-2 col-lg-4">
              <button type="button" class="btn btn-secondary btn-sm">Small Button</button>
            </div>
            <div class="pb-2 col-lg-4">
              <button type="button" class="btn btn-secondary">Default Button</button>
            </div>
            <div class="pb-2 col-lg-4">
              <button type="button" class="btn btn-secondary btn-lg">Large Button</button>
            </div>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">b-row</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">lg</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pb-2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>&gt;</span>Small Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">lg</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pb-2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>&gt;</span>Default Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-col</span> <span class="hljs-attr">lg</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pb-2"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>&gt;</span>Large Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">b-col</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">b-row</span>&gt;</span></pre></figure>
        <h2 id="contextual-variants" class="bv-no-focus-ring"><span class="bd-content-title">上下文变量<a
              class="anchorjs-link" href="#contextual-variants" aria-labelledby="contextual-variants"></a></span></h2>
        <p>使用 <code translate="no" class="notranslate text-nowrap">variant</code> 属性生成各种引导上下文按钮。</p>
        <p>默认情况下， <code translate="no" class="notranslate text-nowrap">&lt;b-button&gt;</code> 将会以 <code translate="no"
            class="notranslate text-nowrap">次要</code> 变量形式呈现。</p>
        <p><code translate="no" class="notranslate text-nowrap">variant</code> 属性在渲染按钮上添加了 Bootstrap v4.3 的类。<code
            translate="no" class="notranslate text-nowrap">.btn-&lt;variant&gt;</code> 可以渲染在按钮上。</p>
        <h3 id="solid-color-variants" class="bv-no-focus-ring"><span class="bd-content-title">纯色变量<a
              class="anchorjs-link" href="#solid-color-variants" aria-labelledby="solid-color-variants"></a></span></h3>
        <p><code translate="no" class="notranslate text-nowrap">primary</code>, <code translate="no"
            class="notranslate text-nowrap">secondary</code>, <code translate="no"
            class="notranslate text-nowrap">success</code>, <code translate="no"
            class="notranslate text-nowrap">danger</code>, <code translate="no"
            class="notranslate text-nowrap">warning</code>, <code translate="no"
            class="notranslate text-nowrap">info</code>, <code translate="no"
            class="notranslate text-nowrap">light</code> 和 <code translate="no"
            class="notranslate text-nowrap">dark</code>.</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-button-solid notranslate">
          <div>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-light">Light</button>
            <button type="button" class="btn btn-dark">Dark</button>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Primary<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"secondary"</span>&gt;</span>Secondary<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Success<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"danger"</span>&gt;</span>Danger<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"warning"</span>&gt;</span>Warning<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"info"</span>&gt;</span>Info<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"light"</span>&gt;</span>Light<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"dark"</span>&gt;</span>Dark<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h3 id="outline-color-variants" class="bv-no-focus-ring"><span class="bd-content-title">轮廓颜色变量<a
              class="anchorjs-link" href="#outline-color-variants" aria-labelledby="outline-color-variants"></a></span>
        </h3>
        <p>需要一个按钮，而不是他们带来的深重的背景颜色? 使用 <code translate="no" class="notranslate text-nowrap">outline-*</code> 变量，来删除任何
          <code translate="no" class="notranslate text-nowrap">&lt;b-button&gt;</code> 背景图片和颜色:</p>
        <p><code translate="no" class="notranslate text-nowrap">outline-primary</code>, <code translate="no"
            class="notranslate text-nowrap">outline-secondary</code>, <code translate="no"
            class="notranslate text-nowrap">outline-success</code>, <code translate="no"
            class="notranslate text-nowrap">outline-danger</code>, <code translate="no"
            class="notranslate text-nowrap">outline-warning</code>, <code translate="no"
            class="notranslate text-nowrap">outline-info</code>, <code translate="no"
            class="notranslate text-nowrap">outline-light</code> and <code translate="no"
            class="notranslate text-nowrap">outline-dark</code>.</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-button-outline notranslate">
          <div>
            <button type="button" class="btn btn-outline-primary">Primary</button>
            <button type="button" class="btn btn-outline-secondary">Secondary</button>
            <button type="button" class="btn btn-outline-success">Success</button>
            <button type="button" class="btn btn-outline-danger">Danger</button>
            <button type="button" class="btn btn-outline-warning">Warning</button>
            <button type="button" class="btn btn-outline-info">Info</button>
            <button type="button" class="btn btn-outline-light">Light</button>
            <button type="button" class="btn btn-outline-dark">Dark</button>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-primary"</span>&gt;</span>Primary<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-secondary"</span>&gt;</span>Secondary<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-success"</span>&gt;</span>Success<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-danger"</span>&gt;</span>Danger<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-warning"</span>&gt;</span>Warning<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-info"</span>&gt;</span>Info<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-light"</span>&gt;</span>Light<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-dark"</span>&gt;</span>Dark<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h3 id="link-variant" class="bv-no-focus-ring"><span class="bd-content-title">链接变量<a class="anchorjs-link"
              href="#link-variant" aria-labelledby="link-variant"></a></span></h3>
        <p>变量 <code translate="no" class="notranslate text-nowrap">link</code> 将渲染具有链接外观的按钮，同时保持按钮的默认填充和大小。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-button-link notranslate">
          <div>
            <button type="button" class="btn btn-link">Link</button>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"link"</span>&gt;</span>Link<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <p><strong>提示：</strong> 通过向<code translate="no" class="notranslate text-nowrap">&lt;b-button&gt;</code>添加
          Bootstrap v4.3 实用工具类 <code translate="no" class="notranslate text-nowrap">text-decoration-none</code>
          来从链接变量按钮中移除悬停下划线。 </p>
        <h2 id="block-level-buttons" class="bv-no-focus-ring"><span class="bd-content-title">块级按钮<a
              class="anchorjs-link" href="#block-level-buttons" aria-labelledby="block-level-buttons"></a></span></h2>
        <p>创建块级按钮 — 跨越父级的整个宽度的按钮 — 通过设置 <code translate="no" class="notranslate text-nowrap">block</code> 属性。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-button-block notranslate">
          <div>
            <button type="button" class="btn btn-primary btn-block">Block Level Button</button>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">block</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Block Level Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h2 id="pill-style" class="bv-no-focus-ring"><span class="bd-content-title">药丸风格<a class="anchorjs-link"
              href="#pill-style" aria-labelledby="pill-style"></a></span></h2>
        <p>更喜欢圆润的药丸风格的按钮？ 把 <code translate="no" class="notranslate text-nowrap">pill</code> 属性设置为设置为 true。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-button-pill notranslate">
          <div>
            <button type="button" class="btn btn-secondary rounded-pill">Button</button>
            <button type="button" class="btn btn-primary rounded-pill">Button</button>
            <button type="button" class="btn btn-outline-secondary rounded-pill">Button</button>
            <button type="button" class="btn btn-success rounded-pill">Button</button>
            <button type="button" class="btn btn-outline-danger rounded-pill">Button</button>
            <button type="button" class="btn btn-info rounded-pill">Button</button>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">pill</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">pill</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">pill</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-secondary"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">pill</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">pill</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-danger"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">pill</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"info"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <p>该属性添加了 Bootstrap v4.3 实用程序类， <code translate="no" class="notranslate text-nowrap">.rounded-pill</code>
          可以渲染在按钮上。</p>
        <h2 id="squared-style" class="bv-no-focus-ring"><span class="bd-content-title">方块风格<a class="anchorjs-link"
              href="#squared-style" aria-labelledby="squared-style"></a></span></h2>
        <p>更喜欢具有更方角样式的按钮？只需将 <code translate="no" class="notranslate text-nowrap">squared</code> 设置为 true。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-button-square notranslate">
          <div>
            <button type="button" class="btn btn-secondary rounded-0">Button</button>
            <button type="button" class="btn btn-primary rounded-0">Button</button>
            <button type="button" class="btn btn-outline-secondary rounded-0">Button</button>
            <button type="button" class="btn btn-success rounded-0">Button</button>
            <button type="button" class="btn btn-outline-danger rounded-0">Button</button>
            <button type="button" class="btn btn-info rounded-0">Button</button>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">squared</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">squared</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">squared</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-secondary"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">squared</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">squared</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"outline-danger"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">squared</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"info"</span>&gt;</span>Button<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <p>此 <code translate="no" class="notranslate text-nowrap">squared</code> 属性添加了 Bootstrap v4.3 实用程序类。 <code
            translate="no" class="notranslate text-nowrap">.rounded-0</code> 在按钮上渲染。 <code translate="no"
            class="notranslate text-nowrap">pill</code> 属性优先于 <code translate="no"
            class="notranslate text-nowrap">squared</code> 属性。</p>
        <h2 id="disabled-state" class="bv-no-focus-ring"><span class="bd-content-title">禁用状态<a class="anchorjs-link"
              href="#disabled-state" aria-labelledby="disabled-state"></a></span></h2>
        <p>将 <code translate="no" class="notranslate text-nowrap">disabled</code> 属性设置为禁用按钮默认功能。 <code translate="no"
            class="notranslate text-nowrap">disabled</code>也可以渲染在<code translate="no"
            class="notranslate text-nowrap">&lt;a&gt;</code> 元素和 <code translate="no"
            class="notranslate text-nowrap">&lt;router-link&gt;</code> 上(i.e. 与 <code translate="no"
            class="notranslate text-nowrap">href</code> 或 <code translate="no" class="notranslate text-nowrap">to</code>
          属性设置)。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-button-disabled notranslate">
          <div>
            <button type="button" disabled="disabled" class="btn btn-primary btn-lg disabled">Disabled</button>
            <button type="button" disabled="disabled" class="btn btn-secondary btn-lg disabled">Also Disabled</button>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"lg"</span>&gt;</span>Also Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre></figure>
        <h2 id="pressed-state-and-toggling" class="bv-no-focus-ring"><span class="bd-content-title">按下状态和切换<a
              class="anchorjs-link" href="#pressed-state-and-toggling"
              aria-labelledby="pressed-state-and-toggling"></a></span></h2>
        <p>当 <code translate="no" class="notranslate text-nowrap">pressed</code> 属性被设置为 <code translate="no"
            class="notranslate text-nowrap">true</code> 时，按钮将会显示为按下（带有较暗的背景、较暗的边框和嵌入的阴影）。</p>
        <p><code translate="no" class="notranslate text-nowrap">pressed</code> 属性可以设置为三个值之一:</p>
        <ul>
          <li><code translate="no" class="notranslate text-nowrap">true</code>: 设置 <code translate="no"
              class="notranslate text-nowrap">.active</code> 类并添加属性 <code translate="no"
              class="notranslate text-nowrap">aria-pressed="true"</code>。</li>
          <li><code translate="no" class="notranslate text-nowrap">false</code>: 清除 <code translate="no"
              class="notranslate text-nowrap">.active</code> 类并添加属性 <code translate="no"
              class="notranslate text-nowrap">aria-pressed="false"</code>。</li>
          <li><code translate="no" class="notranslate text-nowrap">null</code>: （默认）既不会设置 <code translate="no"
              class="notranslate text-nowrap">.active</code> 类， 也不会设置 <code translate="no"
              class="notranslate text-nowrap">aria-pressed</code> 属性。</li>
        </ul>
        <p>若要创建可在活动状态和非活动状态之间切换的按钮，请使用 <code translate="no" class="notranslate text-nowrap">.sync</code> 属性修饰 （在Vue
          2.3+中可用） <code translate="no" class="notranslate text-nowrap">pressed</code> 属性。</p>
        <div translate="translate" class="bd-example vue-example vue-example-b-button-toggles notranslate">
          <div>
            <h5>Pressed and un-pressed state</h5>
            <button type="button" aria-pressed="true" autocomplete="off" class="btn btn-success active">Always
              Pressed</button>
            <button type="button" aria-pressed="false" autocomplete="off" class="btn btn-success">Not Pressed</button>
            <h5 class="mt-3">Toggleable Button</h5>
            <button type="button" aria-pressed="false" autocomplete="off" class="btn btn-primary">Toggle Me</button>
            <p>Pressed State: <strong>false</strong></p>
            <h5>In a button group</h5>
            <div role="group" class="btn-group btn-group-sm">
              <button type="button" aria-pressed="true" autocomplete="off" class="btn btn-primary active"> Toggle 1
              </button>
              <button type="button" aria-pressed="false" autocomplete="off" class="btn btn-primary"> Toggle 2 </button>
              <button type="button" aria-pressed="true" autocomplete="off" class="btn btn-primary active"> Toggle 3
              </button>
              <button type="button" aria-pressed="false" autocomplete="off" class="btn btn-primary"> Toggle 4 </button>
            </div>
            <p>Pressed States: <strong>[
                true,
                false,
                true,
                false
                ]</strong></p>
          </div>
        </div>
        <figure class="highlight">
        <pre class="hljs html text-monospace p-2 notranslate xml editable" translate="no"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h5</span>&gt;</span>Pressed and un-pressed state<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">:pressed</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Always Pressed<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">:pressed</span>=<span class="hljs-string">"false"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"success"</span>&gt;</span>Not Pressed<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-3"</span>&gt;</span>Toggleable Button<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span> <span class="hljs-attr">:pressed.sync</span>=<span class="hljs-string">"myToggle"</span> <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>&gt;</span>Toggle Me<span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Pressed State: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ myToggle }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

    <span class="hljs-tag">&lt;<span class="hljs-name">h5</span>&gt;</span>In a button group<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">b-button-group</span> <span class="hljs-attr">size</span>=<span class="hljs-string">"sm"</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">b-button</span>
        <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(btn, idx) in buttons"</span>
        <span class="hljs-attr">:key</span>=<span class="hljs-string">"idx"</span>
        <span class="hljs-attr">:pressed.sync</span>=<span class="hljs-string">"btn.state"</span>
        <span class="hljs-attr">variant</span>=<span class="hljs-string">"primary"</span>
      &gt;</span>
        {{ btn.caption }}
      <span class="hljs-tag">&lt;/<span class="hljs-name">b-button</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">b-button-group</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Pressed States: <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>{{ btnStates }}<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
      <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">myToggle</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">buttons</span>: [
          { <span class="hljs-attr">caption</span>: <span class="hljs-string">'Toggle 1'</span>, <span class="hljs-attr">state</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">caption</span>: <span class="hljs-string">'Toggle 2'</span>, <span class="hljs-attr">state</span>: <span class="hljs-literal">false</span> },
          { <span class="hljs-attr">caption</span>: <span class="hljs-string">'Toggle 3'</span>, <span class="hljs-attr">state</span>: <span class="hljs-literal">true</span> },
          { <span class="hljs-attr">caption</span>: <span class="hljs-string">'Toggle 4'</span>, <span class="hljs-attr">state</span>: <span class="hljs-literal">false</span> }
        ]
      }
    },
    <span class="hljs-attr">computed</span>: {
      btnStates() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.buttons.map(<span class="hljs-function"><span class="hljs-params">btn</span> =&gt;</span> btn.state)
      }
    }
  }
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></pre></figure>
        <p>如果对单选或复选框样式的接口使用切换按钮样式，则最好使用 <a href="../../../bootstrap-vue/docs/components/form-radio"
            class="font-weight-bold"><code translate="no"
              class="notranslate text-nowrap">&lt;b-form-radio-group&gt;</code></a> 和 <a
            href="../../../bootstrap-vue/docs/components/form-checkbox" class="font-weight-bold"><code translate="no"
              class="notranslate text-nowrap">&lt;b-form-checkbox-group&gt;</code></a> 的内置 <code translate="no"
            class="notranslate text-nowrap">button</code> 样式支持。</p>
        <h2 id="router-link-support" class="bv-no-focus-ring"><span class="bd-content-title">路由器连接支持<a
              class="anchorjs-link" href="#router-link-support" aria-labelledby="router-link-support"></a></span></h2>
        <p>参考 <a href="../../../bootstrap-vue/docs/reference/router-links" class="font-weight-bold"><code translate="no"
              class="notranslate text-nowrap">路由器支持</code></a> 文档，了解各种支持的 <code translate="no"
            class="notranslate text-nowrap">&lt;router-link&gt;</code> 相关属性。</p>
        <p>注意， <code translate="no" class="notranslate text-nowrap">&lt;router-link&gt;</code> 属性 <code translate="no"
            class="notranslate text-nowrap">tag</code> 在 <code translate="no"
            class="notranslate text-nowrap">bootstrap-vue</code> 中被称作 <code translate="no"
            class="notranslate text-nowrap">router-tag</code> 。</p>
        <h2 id="accessibility" class="bv-no-focus-ring"><span class="bd-content-title">可访问性<a class="anchorjs-link"
              href="#accessibility" aria-labelledby="accessibility"></a></span></h2>
        <p>当 <code translate="no" class="notranslate text-nowrap">href</code> 属性被设置为 <code translate="no"
            class="notranslate text-nowrap">'#'</code>时, <code translate="no"
            class="notranslate text-nowrap">&lt;b-button&gt;</code> 将渲染一个link (<code translate="no"
            class="notranslate text-nowrap">&lt;a&gt;</code>) 元素，该元素的属性 <code translate="no"
            class="notranslate text-nowrap">role="button"</code> 被设置，并且有适当的keydown监听器 (<kbd class="notranslate"
            translate="no">Enter</kbd> 和 <kbd class="notranslate" translate="no">Space</kbd>)
          这样该链接对于屏幕阅读器和键盘用户来说就像一个原生的HTML <code translate="no" class="notranslate text-nowrap">&lt;button&gt;</code>，
          当禁用时，将在 <code translate="no" class="notranslate text-nowrap">&lt;a&gt;</code> 元素上设置 <code translate="no"
            class="notranslate text-nowrap">aria-disabled="true"</code> 属性。</p>
        <p>当 <code translate="no" class="notranslate text-nowrap">href</code> 被设置为任何其他值 (或使用 <code translate="no"
            class="notranslate text-nowrap">to</code> 属性)， <code translate="no"
            class="notranslate text-nowrap">role="button"</code> 将不会添加，也不会启用键盘事件监听器。</p>
        <h2 id="see-also" class="bv-no-focus-ring"><span class="bd-content-title">另请参阅<a class="anchorjs-link"
              href="#see-also" aria-labelledby="see-also"></a></span></h2>
        <ul>
          <li><a href="../../../bootstrap-vue/docs/components/button-group" class="font-weight-bold"><code
                translate="no" class="notranslate text-nowrap">&lt;b-button-group&gt;</code></a></li>
          <li><a href="../../../bootstrap-vue/docs/components/button-toolbar" class="font-weight-bold"><code
                translate="no" class="notranslate text-nowrap">&lt;b-button-toolbar&gt;</code></a></li>
          <li><a href="../../../bootstrap-vue/docs/components/link" class="font-weight-bold"><code translate="no"
                class="notranslate text-nowrap">&lt;b-link&gt;</code></a></li>
          <li><a href="../../../bootstrap-vue/docs/reference/router-links" class="font-weight-bold">路由器连接支持</a></li>
          <li><a href="../../../bootstrap-vue/docs/reference/color-variants" class="font-weight-bold">颜色变量</a></li>
        </ul>
        <!-- Component reference added automatically from component package.json -->

        <h2 id="component-reference" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">组件引用<a
              href="../../../bootstrap-vue/docs/components/button#component-reference" class="anchorjs-link"
              aria-labelledby="component-reference" target="_self"></a></span></h2>


        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-button" tabindex="-1" class="bv-no-focus-ring"><span
                data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-button&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/button#comp-ref-b-button" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-button" target="_self"></a></span></h3>
            <a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
              class="badge badge-secondary"> 功能组件 </a>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/button/button.js"
              class="btn btn-outline-secondary btn-sm"> View source </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-button-aliases"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-button&gt;</code> 组件别名 </a></li>
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-button-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-button&gt;</code> 属性 </a></li>

          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-button-events"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-button&gt;</code> 事件 </a></li>

        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-button-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> 组件别名 <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/button#comp-ref-b-button-aliases" class="anchorjs-link"
                aria-labelledby="comp-ref-b-button-aliases" target="_self"></a></span></h4>
          <p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate"
              class="notranslate">&lt;b-button&gt;</code> 也可以通过以下别名使用：</p>
          <ul data-v-866a22e8="">
            <li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate"
                class="notranslate">&lt;b-btn&gt;</code></li>
          </ul>
          <div data-v-866a22e8="" class="alert alert-info">
            <p data-v-866a22e8="" class="mb-0 small"> 注意：组件别名仅在导入所有 BootstrapVue 或使用组件组插件时可用。 </p>
          </div>
        </article>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-button-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/button#comp-ref-b-button-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-button-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__714">

              <thead role="rowgroup" class="">

                <tr role="row" class="">
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="1" aria-sort="none"
                    class="b-table-sort-icon-left">属性<span class="sr-only"> (Click to sort Ascending)</span></th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="2" class="">类型</th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="3" class="">默认值</th>
                  <th role="columnheader" scope="col" tabindex="0" aria-colindex="4" class="">描述</th>
                </tr>
              </thead>
              <tbody role="rowgroup">

                <tr role="row" data-pk="href" class="" id="__BVID__714__row_href">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">href</code> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">表示标准a链接的目标URL</td>
                </tr>

                <tr role="row" data-pk="rel" class="" id="__BVID__714__row_rel">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">rel</code> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">设置渲染链接上的'rel'属性</td>
                </tr>

                <tr role="row" data-pk="target" class="" id="__BVID__714__row_target">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">target</code> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'_self'</code></td>
                  <td aria-colindex="4" role="cell" class="">在渲染的链接上设置'target'属性</td>
                </tr>

                <tr role="row" data-pk="active" class="" id="__BVID__714__row_active">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">active</code> </td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">当设置为“true”时，将组件置于活动状态，并使用活动样式</td>
                </tr>

                <tr role="row" data-pk="disabled" class="" id="__BVID__714__row_disabled">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">disabled</code> </td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">当设置为“true”时，将禁用组件的功能并将其置于禁用状态</td>
                </tr>

                <tr role="row" data-pk="to" class="" id="__BVID__714__row_to">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">to</code> </td>
                  <td aria-colindex="2" role="cell" class="">String or Object</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">router-link 属性: 表示链路的目标路由。单击时，to
                    属性的值将在内部传递给router.push()，因此该值可以是字符串，也可以是位置描述符对象</td>
                </tr>

                <tr role="row" data-pk="append" class="" id="__BVID__714__row_append">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">append</code> </td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">router-link 属性: 设置追加属性始终将相对路径追加到当前路径</td>
                </tr>

                <tr role="row" data-pk="replace" class="" id="__BVID__714__row_replace">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">replace</code> </td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">router-link 属性:
                    点击时，替换道具会调用“router.replace()”而不是“router.push()”，这样导航就不会留下历史记录</td>
                </tr>

                <tr role="row" data-pk="event" class="" id="__BVID__714__row_event">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">event</code> </td>
                  <td aria-colindex="2" role="cell" class="">String or Array</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'click'</code></td>
                  <td aria-colindex="4" role="cell" class="">router-link 属性: 指定触发链接的事件。在大多数情况下，您应该保持默认设置</td>
                </tr>

                <tr role="row" data-pk="active-class" class="" id="__BVID__714__row_active-class">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">active-class</code> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">router-link 属性: 配置链接处于活动状态时应用的活动CSS类。通常你会想要将这个设置为类名“active”
                  </td>
                </tr>

                <tr role="row" data-pk="exact" class="" id="__BVID__714__row_exact">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">exact</code> </td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">router-link 属性: 默认的活动类匹配行为是包含匹配。设置此道具将强制模式精确匹配路线</td>
                </tr>

                <tr role="row" data-pk="exact-active-class" class="" id="__BVID__714__row_exact-active-class">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">exact-active-class</code> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">router-link 属性:
                    配置活动的CSS类应用时，链接是活动的与精确匹配。通常你会想要将这个设置为类名“active”</td>
                </tr>

                <tr role="row" data-pk="router-tag" class="" id="__BVID__714__row_router-tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">router-tag</code> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'a'</code></td>
                  <td aria-colindex="4" role="cell" class="">router-link 属性:
                    指定要呈现哪个标记，它仍然会侦听用于导航的单击事件。“router-tag”解析为最终呈现的router-link上的标签属性。通常应该使用默认值</td>
                </tr>

                <tr role="row" data-pk="no-prefetch" class="" id="__BVID__714__row_no-prefetch">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">no-prefetch</code> </td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">nuxt-link 属性:
                    为了提高Nuxt.js应用程序的响应能力，当链接在viewport中显示时，Nuxt.js会自动预取分离页面的代码。设置‘no-prefetch’将禁用特定链接的此功能</td>
                </tr>

                <tr role="row" data-pk="block" class="" id="__BVID__714__row_block">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">block</code> </td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">呈现一个100%宽度的按钮(扩展为其父容器的宽度)</td>
                </tr>

                <tr role="row" data-pk="size" class="" id="__BVID__714__row_size">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">size</code> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">设置组件外观的大小。“sm”、“md”(默认)或“lg”'</td>
                </tr>

                <tr role="row" data-pk="variant" class="" id="__BVID__714__row_variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">variant</code> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'secondary'</code></td>
                  <td aria-colindex="4" role="cell" class="">将一个引导主题颜色变量应用于组件</td>
                </tr>

                <tr role="row" data-pk="type" class="" id="__BVID__714__row_type">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">type</code> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'button'</code></td>
                  <td aria-colindex="4" role="cell" class="">将按钮的“type”属性设置为的值。可以是'button'， 'submit'或'reset'中的一个</td>
                </tr>

                <tr role="row" data-pk="tag" class="" id="__BVID__714__row_tag">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">tag</code> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'button'</code></td>
                  <td aria-colindex="4" role="cell" class="">指定要渲染的HTML标记，而不是默认标记</td>
                </tr>

                <tr role="row" data-pk="pill" class="" id="__BVID__714__row_pill">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">pill</code> </td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">当设置为‘true’时，渲染带有药丸样式外观的按钮</td>
                </tr>

                <tr role="row" data-pk="squared" class="" id="__BVID__714__row_squared">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">squared</code> </td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">当设置为“true”时，显示带有非圆角的按钮</td>
                </tr>

                <tr role="row" data-pk="pressed" class="" id="__BVID__714__row_pressed">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">pressed</code> </td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">当设置为‘true’时，会给按钮一种被按下的感觉。使用.sync修改器进行同步</td>
                </tr>

              </tbody>

            </table>
          </div>
          <div data-v-866a22e8="" class="alert alert-info">
            <p data-v-866a22e8="" class="mb-0 small"><code data-v-866a22e8="" translate="translate"
                class="notranslate">&lt;b-button&gt;</code> 支持生成 <code data-v-866a22e8="" translate="translate"
                class="notranslate">&lt;router-link&gt;</code> 或 <code data-v-866a22e8="" translate="translate"
                class="notranslate">&lt;nuxt-link&gt;</code> 组件(如果使用Nuxt.js)。
              有关路由器链接(或nuxt link)特定道具的详细信息，请参 <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/reference/router-links" class="alert-link" target="_self">阅路由器支持</a>
              参考部分。 </p>
          </div>
        </article>

        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-button-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/button#comp-ref-b-button-events" class="anchorjs-link"
                aria-labelledby="comp-ref-b-button-events" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped"
              id="__BVID__748">

              <thead role="rowgroup" class="">

                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
                </tr>
              </thead>
              <tbody role="rowgroup">

                <tr role="row" data-pk="click" class="" id="__BVID__748__row_click">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="notranslate">click</code> </td>
                  <td aria-colindex="2" role="cell" class="">
                    <ol data-v-866a22e8="" class="list-unstyled mb-0">
                      <li data-v-866a22e8=""> <span data-v-866a22e8="">Native click event object</span></li>
                    </ol>
                  </td>
                  <td aria-colindex="3" role="cell" class="">当非禁用按钮单击时发出</td>
                </tr>

              </tbody>

            </table>
          </div>
        </article>

        <header data-v-866a22e8="" class="row align-items-center">
          <div data-v-866a22e8="" class="col-sm-9">
            <h3 data-v-866a22e8="" id="comp-ref-b-button-close" tabindex="-1" class="bv-no-focus-ring"><span
                data-v-866a22e8="" class="bd-content-title"><code data-v-866a22e8="" translate="translate"
                  class="notranslate bigger">&lt;b-button-close&gt;</code><a data-v-866a22e8=""
                  href="../../../bootstrap-vue/docs/components/button#comp-ref-b-button-close" class="anchorjs-link"
                  aria-labelledby="comp-ref-b-button-close" target="_self"></a></span></h3>
            <a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
              class="badge badge-secondary"> 功能组件 </a>
          </div>
          <div data-v-866a22e8="" class="text-sm-right col-sm-3"><a data-v-866a22e8="" rel="noopener" target="_blank"
              href="https://github.com/bootstrap-vue/bootstrap-vue/tree/dev/src/components/button/button-close.js"
              class="btn btn-outline-secondary btn-sm"> 查看源代码 </a></div>
        </header>
        <ul data-v-866a22e8="" class="component-ref-mini-toc my-3">
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-button-close-aliases"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-button-close&gt;</code> 组件别名 </a></li>
          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-button-close-props"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-button-close&gt;</code> 属性 </a></li>

          <li data-v-866a22e8=""><a data-v-866a22e8="" href="#comp-ref-b-button-close-events"><code data-v-866a22e8=""
                translate="translate" class="notranslate">&lt;b-button-close&gt;</code> 事件 </a></li>

        </ul>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-button-close-aliases" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> Component aliases <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/button#comp-ref-b-button-close-aliases"
                class="anchorjs-link" aria-labelledby="comp-ref-b-button-close-aliases" target="_self"></a></span></h4>
          <p data-v-866a22e8=""><code data-v-866a22e8="" translate="translate"
              class="notranslate">&lt;b-button-close&gt;</code> 也可以通过以下别名使用：</p>
          <ul data-v-866a22e8="">
            <li data-v-866a22e8=""><code data-v-866a22e8="" translate="translate"
                class="notranslate">&lt;b-btn-close&gt;</code></li>
          </ul>
          <div data-v-866a22e8="" class="alert alert-info">
            <p data-v-866a22e8="" class="mb-0 small"> 注意:组件别名仅在导入所有BootstrapVue或使用组件组插件时可用。 </p>
          </div>
        </article>
        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-button-close-props" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> 属性 <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/button#comp-ref-b-button-close-props" class="anchorjs-link"
                aria-labelledby="comp-ref-b-button-close-props" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="4" class="table b-table bv-docs-table table-striped"
              id="__BVID__765">

              <thead role="rowgroup" class="">

                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">属性</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">类型</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">默认值</th>
                  <th role="columnheader" scope="col" aria-colindex="4" class="">描述</th>
                </tr>
              </thead>
              <tbody role="rowgroup">

                <tr role="row" data-pk="content" class="" id="__BVID__765__row_content">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">content</code> <span data-v-866a22e8=""
                      class="badge badge-secondary">v2.3.0+</span> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'&amp;times;'</code></td>
                  <td aria-colindex="4" role="cell" class="">关闭按钮的内容</td>
                </tr>

                <tr role="row" data-pk="disabled" class="" id="__BVID__765__row_disabled">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">disabled</code> </td>
                  <td aria-colindex="2" role="cell" class="">Boolean</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">false</code></td>
                  <td aria-colindex="4" role="cell" class="">当设置为“true”时，将禁用组件的功能并将其置于禁用状态</td>
                </tr>

                <tr role="row" data-pk="aria-label" class="" id="__BVID__765__row_aria-label">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">aria-label</code> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="word-wrap-normal notranslate">'Close'</code></td>
                  <td aria-colindex="4" role="cell" class="">在渲染的元素上设置'aria-label'属性的值</td>
                </tr>

                <tr role="row" data-pk="text-variant" class="" id="__BVID__765__row_text-variant">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="text-nowrap notranslate">text-variant</code> </td>
                  <td aria-colindex="2" role="cell" class="">String</td>
                  <td aria-colindex="3" role="cell" class=""></td>
                  <td aria-colindex="4" role="cell" class="">将一个引导主题颜色变量应用于文本</td>
                </tr>

              </tbody>

            </table>
          </div>
        </article>

        <article data-v-866a22e8="" class="bd-content">
          <h4 data-v-866a22e8="" id="comp-ref-b-button-close-events" tabindex="-1" class="bv-no-focus-ring mb-3"><span
              data-v-866a22e8="" class="bd-content-title"> 事件 <a data-v-866a22e8=""
                href="../../../bootstrap-vue/docs/components/button#comp-ref-b-button-close-events"
                class="anchorjs-link" aria-labelledby="comp-ref-b-button-close-events" target="_self"></a></span></h4>
          <div data-v-866a22e8="" class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped"
              id="__BVID__779">

              <thead role="rowgroup" class="">

                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">事件</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">参数</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">描述</th>
                </tr>
              </thead>
              <tbody role="rowgroup">

                <tr role="row" data-pk="click" class="" id="__BVID__779__row_click">
                  <td aria-colindex="1" role="cell" class=""><code data-v-866a22e8="" translate="translate"
                      class="notranslate">click</code> </td>
                  <td aria-colindex="2" role="cell" class="">
                    <ol data-v-866a22e8="" class="list-unstyled mb-0">
                      <li data-v-866a22e8=""> <span data-v-866a22e8="">Native click event object</span></li>
                    </ol>
                  </td>
                  <td aria-colindex="3" role="cell" class="">当非禁用按钮单击时发出</td>
                </tr>

              </tbody>

            </table>
          </div>
        </article>

        <article class="bd-content">
          <h3 id="importing-individual-components" tabindex="-1" class="bv-no-focus-ring"><span
              class="bd-content-title"> 导入单个组件 <a
                href="../../../bootstrap-vue/docs/components/button#importing-individual-components"
                class="anchorjs-link" aria-labelledby="importing-individual-components" target="_self"></a></span></h3>
          <p> 您可以通过以下指定的导出将各个组件导入到您的项目中： </p>
          <div class="table-responsive-sm">
            <table role="table" aria-busy="false" aria-colcount="3" class="table b-table bv-docs-table table-striped"
              id="__BVID__790">

              <thead role="rowgroup" class="thead-default">

                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">组件</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">命名输出</th>
                  <th role="columnheader" scope="col" aria-colindex="3" class="">导入路径</th>
                </tr>
              </thead>
              <tbody role="rowgroup">

                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-button&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BButton</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>
                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">&lt;b-button-close&gt;</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">BButtonClose</code></td>
                  <td aria-colindex="3" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>

              </tbody>

            </table>
          </div>
          <p><strong>示例：</strong></p>
          <figure class="highlight">
          <pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { BButton } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.component(<span class="hljs-string">'b-button'</span>, BButton)</pre></figure>
        </article>

        <article class="bd-content">
          <h3 id="importing-as-a-plugin" tabindex="-1" class="bv-no-focus-ring"><span class="bd-content-title">
              作为Vue.js插件导入 <a href="../../../bootstrap-vue/docs/components/button#importing-as-a-plugin"
                class="anchorjs-link" aria-labelledby="importing-as-a-plugin" target="_self"></a></span></h3>
          <p> 这个插件包含了上面列出的所有组件。插件还包括任何组件别名。 </p>
          <div class="table-responsive-sm">
            <table fileds="namedExport,importPath" role="table" aria-busy="false" aria-colcount="2"
              class="table b-table bv-docs-table table-striped b-table-caption-top" id="__BVID__801">

              <thead role="rowgroup" class="thead-default">

                <tr role="row" class="">
                  <th role="columnheader" scope="col" aria-colindex="1" class="">命名输出</th>
                  <th role="columnheader" scope="col" aria-colindex="2" class="">导入路径</th>
                </tr>
              </thead>
              <tbody role="rowgroup">

                <tr role="row" class="">
                  <td aria-colindex="1" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">ButtonPlugin</code></td>
                  <td aria-colindex="2" role="cell" class=""><code translate="translate"
                      class="text-nowrap notranslate">bootstrap-vue</code></td>
                </tr>

              </tbody>

            </table>
          </div>

          <p><strong>示例：</strong></p>
          <figure class="highlight">
          <pre translate="translate" class="hljs language-js text-monospace p-2 notranslate javascript"><span class="hljs-keyword">import</span> { ButtonPlugin } <span class="hljs-keyword">from</span> <span class="hljs-string">'bootstrap-vue'</span>
Vue.use(ButtonPlugin)</pre></figure>
        </article>
























      </main>
    </div>
  </div>


<script src="../../../v4/assets/js/vendor/jquery-slim.min.js"></script>
  <script src="../../../v4/dist/js/popper.min.js"></script>
  <script src="../../../v4/dist/js/bootstrap.min.js"></script>
  <script src="../../../v4/assets/js/docs.min.js"></script>
  <script src="../../../v4/assets/js/ie-emulation-modes-warning.js"></script>
  <script src="../../../v4/assets/js/docsearch.min.js"></script>
  <script>
    docsearch({
      appId: 'PRR89ISST8',
      apiKey: '95044d57d4d7bb744f322d1f18ed607f',
      indexName: 'z01-bootstrapV4',
      inputSelector: '#search-input',
      handleSelected: function (input, event, suggestion) {
        var url = suggestion.url;
        url = suggestion.isLvl1 ? url.split('#')[0] : url;
        // If it's a title we remove the anchor so it does not jump.
        window.location.href = url;
      },
      transformData: function (hits) {
        return hits.map(function (hit) {
          hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
          return hit;
        });
      },
      debug: false // Set debug to true if you want to inspect the dropdown
    });
  </script>
  <script>
    Holder.addTheme('gray', {
      bg: '#777',
      fg: 'rgba(255,255,255,.75)',
      font: 'Helvetica',
      fontweight: 'normal'
    });
  </script>
</body>

</html>